<template>
    <div class="base-home">
        <Amap :showSearch="false" class="container-map" @complete="complete"></Amap>
        <!-- <div class="mask"></div> -->
        <div class="left">
            <overview></overview>
            <div style="height: 1vh;"></div>
            <zzfb></zzfb>
        </div>

        <div class="land-list">
            <div class="land-item">
               
                <img class="land-i" src="@/assets/land/1.png" alt="" srcset="">
                <div class="land-name">耕地</div>
            </div>
            <div class="land-item">
               
                <img class="land-i" src="@/assets/land/2.png" alt="" srcset="">
                <div class="land-name">草地</div>
            </div>
            <div class="land-item">
                
                <img class="land-i" src="@/assets/land/3.png" alt="" srcset="">
                <div class="land-name">林地</div>
            </div>
            <div class="land-item">
                
                <img class="land-i" src="@/assets/land/4.png" alt="" srcset="">
                <div class="land-name">综合用地</div>
            </div>
            <div class="land-item">
                
                <img class="land-i" src="@/assets/land/5.png" alt="" srcset="">
                <div class="land-name">仓储用地</div>
            </div>
            <div class="land-item">
                
                <img class="land-i" src="@/assets/land/6.png" alt="" srcset="">
                <div class="land-name">住宅用地</div>
            </div>
            <div class="land-item">
                
                <img class="land-i" src="@/assets/land/7.png" alt="" srcset="">
                <div class="land-name">其他用地</div>
            </div>
            <div class="land-item">
                
                <img class="land-i" src="@/assets/land/8.png" alt="" srcset="">
                <div class="land-name">未利用地</div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import overview from './overview.vue';
import zzfb from './zzfb.vue';
import Amap from '@/components/Amap.vue';
import icon1 from '@/assets/land/1.png'
import icon2 from '@/assets/land/2.png'
import icon3 from '@/assets/land/3.png'
import icon4 from '@/assets/land/4.png'
import icon5 from '@/assets/land/5.png'
import icon6 from '@/assets/land/6.png'
import icon7 from '@/assets/land/7.png'
import icon8 from '@/assets/land/8.png'
interface PolygonOpt {
    map: AMap.Map,
    /**点集合 */
    path: AMap.LngLat[] | AMap.LngLat[][] | AMap.LngLat[][][] | undefined,
    /**线颜色 */
    strokeColor: string,
    /**线透明度 */
    strokeOpacity: number,
    /**线宽 */
    strokeWeight: number,
    /**填充色 */
    fillColor: string,
    /** 填充透明度*/
    fillOpacity: number,
    /** 层级*/
    zIndex: number,
    /**自定义数据 */
    extData?: any
}

const landList = [
    {
        name: '1号耕地', center: [121.594158, 30.859403],
        color: '#FA5151', icon: icon1,
        path: [
            [121.591803, 30.860653], [121.595081, 30.861488], [121.59637, 30.857764], [121.593141, 30.856898]
        ]
    },
    {
        name: '2号耕地', center: [121.597613, 30.860446], color: '#FA5151', icon: icon1,
        path: [
            [121.595429, 30.861493], [121.598641, 30.86232], [121.600006, 30.858695], [121.59681, 30.857854]
        ]
    },
    {
        name: '草地', center: [121.59552, 30.854893], color: '#1791fc', icon: icon2,
        path: [
            [121.593321, 30.856332], [121.59655, 30.857177], [121.598088, 30.852768], [121.594782, 30.851949]
        ]
    },
]



const complete = (map: AMap.Map) => {
    map.on('click', (e: AMap.Event) => {
        console.log(e.lnglat)
        map.clearInfoWindow();
    })

    let newmarker = new AMap.Marker({
            position: [121.589174,30.860414],
            anchor: 'bottom-center',
            map: map
        });
       
        let text = new AMap.Text({
            text: '上海星辉蔬菜有限公司',
            anchor: 'center', // 设置文本标记锚点
            angle: 0,
            offset: new AMap.Pixel(0, -50),
            style: {
                'text-align': 'center', background: '#8bb10c', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
            },
            position: [121.589174,30.860414],
            map
        });

     for (let land of landList) {
        let p = addPolygon({
            map: map,
            path: land.path,
            strokeColor: land.color, //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: land.color, //填充色
            fillOpacity: 0.8, //填充透明度
            zIndex: 1,

        })
        p.on('click', () => {
            clickHandler(map, land)
        })

        let icon = new AMap.Icon({
          size: new AMap.Size(50, 50), // 图标尺寸
          image: land.icon,
          imageSize: new AMap.Size(50, 50),
     });


        let newmarker = new AMap.Marker({
            position: land.center,
            anchor: 'center',
            icon: icon,
            map: map
        });
        newmarker.on('click', () => {
            clickHandler(map, land)
        })
        let text = new AMap.Text({
            text: land.name,
            anchor: 'center', // 设置文本标记锚点
            angle: 0,
            offset: new AMap.Pixel(0, -50),
            style: {
                'text-align': 'center', background: '#00000099', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
            },
            position: land.center,
            map
        });
    }

     

    map.setFitView(undefined, false, [160, 160, 160, 160]);
}


const clickHandler = (map: AMap.Map, land:any) => {
    

    var content = `
      <style>
      .land-text-item{color: #ffffff; margin: 0px 10px 10px 10px; width: 40%;}
      </style>
        <div style="background: #00000099;border-radius: 5px;border: 1px solid #000;z-index: 99; font-size:16px">
          <div style="margin: 10px;display: flex; justify-content: space-between;">
            <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 0 0;">${land.name}</div>
            
          </div>
          <div style="display: flex; flex-flow:row wrap ; width:360px;">
          <div class="land-text-item">所属基地：种植基地</div>
          <div class="land-text-item">地块面积：12亩</div>
          <div class="land-text-item">当前作物：太子参</div>
          </div>
          <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 10px 15px;">适宜性</div>
          <div style="display: flex; flex-flow:row wrap ; width:360px;">
          <div class="land-text-item">土壤：适宜</div>
          <div class="land-text-item">气候：适宜</div>
          <div class="land-text-item">病虫害：适宜</div>
          <div class="land-text-item">极端天气：无</div>
            </div>
          </div>
      `;

    var infoWindow = new AMap.InfoWindow({
        anchor: "bottom-center",
        isCustom: true,
        content: content,
    });
    infoWindow.open(map, [land.path[0][0], land.path[0][1]]);
}

const addPolygon = (opt: PolygonOpt): AMap.Polygon => {
    let polygon = new AMap.Polygon();
    polygon.setOptions({
        path: opt.path, //设置多边形边界路径
        strokeColor: opt.strokeColor, //线颜色
        strokeOpacity: opt.strokeOpacity, //线透明度
        strokeWeight: opt.strokeWeight, //线宽
        fillColor: opt.fillColor, //填充色
        fillOpacity: opt.fillOpacity, //填充透明度
        zIndex: opt.zIndex,
        extData: opt.extData
    })
    opt.map.add(polygon)

    polygon.on('click', (e: AMap.Event) => {
        console.log(e.lnglat)
    })

    return polygon
}
</script>
<style scoped>
.base-home {
    display: flex;
    justify-content: space-between;
    padding: 7.8vh 2vw 0 2vw;

    height: 100vh;
    box-sizing: border-box;
}

.container-map {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}

.left {
    width: 20.8vw;
    position: relative;
    z-index: 6;
}

.right {
    width: 20.8vw;
    position: relative;
    z-index: 6;
}

.mask {
    pointer-events: none;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.land-list {
    position: absolute;
    z-index: 10;
    bottom: 2vh;
    right: 2vh;
}

.land-item {
    display: flex;
    align-items: center;
    padding: 1vh;
    background: #00000099;
    margin: 0.5vh;
    width: 8vw;
}

.land-c {
    height: 2vh;
    width: 2vh;
    background: red;
    /* transform: rotateZ(45deg); */
}
.land-i{
    height: 2vh;
    width: 2vh;
}
.land-name {
    font-size: 1.5vh;
    color: #fff;
    padding: 0 0 0 1vw;
}
</style>